<script setup>
	defineProps({
		icon: {
			type: String,
			default: ''
		},
		fontSize: {
			type: String,
			default: '20px'
		},
		width: {
			type: String,
			default: '40px'
		},
		height: {
			type: String,
			default: '100%'
		},
		isPointer: {
			type: Boolean,
			default: true
		}
	})
</script>

<template>
	<div :class="[isPointer ? 'icon' : '' ,'plr', 'flex' ,'fAlignCenter', 'fJustifyCenter',]"
		 :style="{width,height,cursor:isPointer ? 'pointer' : 'default' }">
		<span :class="['iconfont',icon]"  :style="{fontSize}"></span>
	</div>
</template>

<style scoped lang="scss">
	@import "@/style/color.scss";
	.icon {
		&:hover {
			background: var(--icon--background-color);
		}
	}
</style>